<%--
  Created by IntelliJ IDEA.
  User: pc
  Date: 2020/11/30
  Time: 19:15
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>订单信息</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css">
    <script src="${pageContext.request.contextPath}/layui/layui.js"></script>
</head>
<body>

<div id="zsfj">


</div>
<div id="rzGustForm">
    <form class="layui-form" action="" lay-filter="modify">
        <div class="layui-form-item">
            <label class="layui-form-label">姓名</label>
            <div class="layui-input-block">
                <input type="text" name="name" required disabled placeholder="请输入设施的名字" autocomplete="off" class="layui-input">
            </div>
        </div>


        <div class="layui-form-item">
            <label class="layui-form-label">电话</label>
            <div class="layui-input-block">
                <input type="text" name="tel" required disabled placeholder="请输入设施的数量" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">证件</label>
            <div class="layui-input-block">
                <input type="text" name="idcard" required placeholder="请输入设施的类型" autocomplete="off" class="layui-input">
            </div>
        </div>


        <div class="layui-form-item">
            <label class="layui-form-label">订单id</label>
            <div class="layui-input-block">
                <input type="text" name="id" required disabled placeholder="请输入设施的定价" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">押金</label>
            <div class="layui-input-block">
                <input type="text" name="yj" required disabled placeholder="请输入供应商" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">房间号</label>
            <div class="layui-input-block">
                <input type="text" name="roomcode" id="fjh" disabled requaired placeholder="请输入供应商" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
            </div>
        </div>
    </form>
</div>




<table class="layui-hide" id="test" lay-filter="test"></table>
<table class="layui-hide" id="test1" lay-filter="test1"></table>
<table class="layui-hide" id="test2" lay-filter="test2"></table>

<script type="text/html" id="toolbarDemo">
    <h3>今天待入住顾客</h3>
</script>
<script type="text/html" id="toolbarDemo1">
    <h3>今天退房顾客</h3>
</script>
<script type="text/html" id="toolbarDemo2">
    <h3>续房后今天退房顾客</h3>
</script>

<script type="text/html" id="barDemo">
<%--    {{#  if(new Date(d.PUBLISH_DATE) > new Date()){ }}--%>
<a class="layui-btn layui-btn-xs" lay-event="cldd">今天入住顾客</a>
 <%--   {{# if(new Date()>=new Date(d.rzdate) && new Date()< new Date(d.leavedate)){ }}
<a class="layui-btn layui-btn-xs" lay-event="cldd">今天入住顾客</a>
    {{# }else{    }}
    <a class="layui-btn layui-btn-xs layui-btn-disabled">暂不能处理</a>
    {{# } }}--%>
    <%--<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="qxdd">取消</a>--%>
</script>
<script type="text/html" id="barDemo1">
    <%--    {{#  if(new Date(d.PUBLISH_DATE) > new Date()){ }}--%>
    <%--{{# if(new Date()>=new Date(d.rzdate) && new Date()< new Date(d.leavedate)){ }}
    <a class="layui-btn layui-btn-xs" lay-event="cldd">处理订单</a>
    {{# }else{    }}
    <a class="layui-btn layui-btn-xs layui-btn-disabled">暂不能处理</a>
    {{# } }}--%>
    <a class="layui-btn layui-btn-xs layui-btn-disabled">今天该退房了</a>
</script>



<script>
    var form="";
    var $="";
    var data="";
    layui.use(['table','layer','jquery','form'], function(){
        var table = layui.table;
        var layer = layui.layer;
         $= layui.jquery;
        form=layui.form;
        $("#zsfj").hide();
        $("#rzGustForm").hide();


        table.render({
            elem: '#test'
            ,url:'/yddetail'
            ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
            ,title: '用户数据表'
            ,cols: [[
                {field:'id', title:'订单id', fixed: 'left', unresize: true, sort: true}
                ,{field:'name', title:'名字', edit: 'text'}
                ,{field:'tel', title:'电话号', edit: 'text', sort: true}
                ,{field:'tname', title:'房间类型'}
                ,{field:'count', title:'数量'}
                ,{field:'rzdate', title:'入住时间', sort: true}
                ,{field:'leavedate', title:'离开时间'}
                ,{field:'yj', title:'押金'}
                ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
            ]]
            ,page: true
        });
        table.render({
            elem: '#test1'
            ,url:'/yddetails'
            ,toolbar: '#toolbarDemo1' //开启头部工具栏，并为其绑定左侧模板
            ,title: '用户数据表'
            ,cols: [[
                //{field:'id', title:'订单id', fixed: 'left', unresize: true, sort: true}
                {field:'name', title:'名字', edit: 'text'}
                ,{field:'roomid', title:'房间号', edit: 'text'}
                ,{field:'tel', title:'电话号', edit: 'text', sort: true}
                //,{field:'tname', title:'房间类型'}
                ,{field:'count', title:'数量'}
                ,{field:'rzdate', title:'入住时间', sort: true}
                ,{field:'leavedate', title:'离开时间'}
                //,{field:'yj', title:'押金'}
                ,{fixed: 'right', title:'操作', toolbar: '#barDemo1', width:150}
            ]]

        });
        table.render({
            elem: '#test2'
            ,url:'/yddetailss'
            ,toolbar: '#toolbarDemo2' //开启头部工具栏，并为其绑定左侧模板
            ,title: '用户数据表'
            ,cols: [[
                //{field:'id', title:'订单id', fixed: 'left', unresize: true, sort: true}
                {field:'name', title:'名字', edit: 'text'}
                ,{field:'roomid', title:'房间号', edit: 'text'}
                ,{field:'tel', title:'电话号', edit: 'text', sort: true}
                //,{field:'tname', title:'房间类型'}
                ,{field:'count', title:'数量'}
                ,{field:'rzdate', title:'入住时间', sort: true}
                ,{field:'endtime', title:'离开时间'}
                //,{field:'yj', title:'押金'}
                ,{fixed: 'right', title:'操作', toolbar: '#barDemo1', width:150}
            ]]

        });


        //监听行工具事件
        table.on('tool(test)', function(obj){
            data = obj.data;
            //console.log(obj)
            if(obj.event === 'qxdd'){
                layer.confirm('真的删除行么', function(index){
                    obj.del();
                    layer.close(index);
                });
            } else if(obj.event === 'cldd'){

                layer.open({
                    type: 1,
                    skin: 'layui-layer-rim', //加上边框
                    area: ['1200px', '700px'], //宽高
                    content: $("#zsfj")
                });

                $.ajax({
                   url:"/yycl",
                    data:data,
                    type: "post",
                    dataType:"JSON",
                    success:function (ret){
                       $("#zsfj").empty();
                     //alert(JSON.stringify(ret));
                        var div="";
                        for (let i = 0; i < ret.length; i++) {

                            div="<div class='grid-demo grid-demo-bg1' style='color: white;float: left; width: 18%;background-color: lightseagreen;height: 230px;" +
                                "margin: 10px;border-radius:30px;text-align: center;font-weight: bold'>"+ret[i].tname+"<br/>"
                                +"房间号:"+ret[i].roomcode+"<br/>"+"<span style='font-size: 30px'>"+"待分配"+"</span><br/><a class='layui-btn layui-btn-danger layui-btn-xs' style='margin-bottom: 10px'  onclick='rz("+ret[i].roomcode+")'>入住</a></div>";

                            $("#zsfj").append(div);

                        }


                    },error:function (){
                       alert("111");
                    }
                    });


            }
        });



    });


        function rz(a){

            //alert()
            $("#fjh").val(a);

             layer.open({
                 type: 1,
                 skin: 'layui-layer-rim', //加上边框
                 area: ['600px', '500px'], //宽高
                 content:$("#rzGustForm")
             });
            form.val("modify",data);
            form.on('submit(formDemo)',function (data){
                //alert(JSON.stringify(data.field));
                $.ajax({
                    url:"/yycladd"
                    ,type:"post"
                    ,dataType:"json"
                    ,data:data.field
                    ,async:false
                    ,success:function (r){
                        if (r>0){
                            alert("成功");
                            layer.close();
                            table.reload('test',{
                                page:{
                                    curr:1,
                                }
                            });
                        }else {
                            alert("失败");
                        }


                    },error:function (mas){
                        alert("111")
                    }
                });
            });

        }



</script>










</body>
</html>
